<template>
  <div class="container">
    <div class="header">
      <router-link to="/login">
        <div class="avatar">
          <img src="./7dhur6i77hg.png" class="avataricon" alt="">
          <span class="avarattext" v-if="use">{{ use.name }}</span>
          <span class="avarattext" v-else>请登录账户</span>
          <img src="./icon_arrow.png" class="right" alt="">
        </div>
      </router-link>
    </div>
    <div class="content">
      <ul>
        <li class="order">
          <router-link to="">
            <span>我的订单</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </router-link>
        </li>
        <li class="menu">
          <router-link to="/order">
            <img src="./1su4kcv21eg.png" alt="">
            <span>代付款</span>
          </router-link>
          <router-link to="">
            <img src="./2rsi345c8a.png" alt="">
            <span>收货地</span>
          </router-link>
          <router-link to="/cart2">
            <img src="./n9q7tuhs6ao.png" alt="">
            <span>评价</span>
          </router-link>
          <router-link to="">
            <img src="./q69ib1u9teg.png" alt="">
            <span>退款/售后</span>
          </router-link>
        </li>
        <router-link to="">
          <li class="column">
            <img src="./ucenter.png" class="columnImg" alt="">
            <span>我的资产</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="">
          <li class="column">
            <img src="./ucenter1.png" class="columnImg" alt="">
            <span>优惠券</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="">
          <li class="column">
            <img src="./ucenter2.png" class="columnImg" alt="">
            <span>我的收藏</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="/address">
          <li class="column">
            <img src="./ucenter3.png" class="columnImg" alt="">
            <span>地址管理</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="">
          <li class="column">
            <img src="./ucenter4.png" class="columnImg" alt="">
            <span>资质证照</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="">
          <li class="column">
            <img src="./ucenter5.png" class="columnImg" alt="">
            <span>协议规则</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
        <router-link to="">
          <li class="column">
            <img src="./ucenter6.png" class="columnImg" alt="">
            <span>帮助与反馈</span>
            <img src="./icon_arrow.png" class="right" alt="">
          </li>
        </router-link>
      </ul>
      <button @click="btn" class="btnss" v-if="use">退出</button>
    </div>
    <div class="footer">
      <MiNav></MiNav>
    </div>
  </div>
</template>
<script>
import MiNav from "../../components/MiNav/MiNav"
import request from "../../utils/request";

export default {
  name: "Profile",
  components: {MiNav: MiNav},
  data() {
    return {
      use: undefined,
      dataList: []
    }
  },

  created() {
    this.use = JSON.parse(sessionStorage.getItem("use"));
    this.init()
  },
  methods: {
    init() {
      request({
        url: "/cart/list",
        method: "post",
        headers: {Authorization: sessionStorage.getItem("token")},
      }).then((res) => {
        this.dataList = res
      });
    },
    btn() {
      sessionStorage.removeItem("token")
      sessionStorage.removeItem("use")
      this.$router.replace("/login")
    },

  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;


}

.header {
  height: 22vw;
  flex-shrink: 0;
  background-image: url("./background.png");
  background-size: 100%;
  display: flex;
  flex-direction: column;
}

.avatar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;

}

.avataricon {
  width: 60px;
  height: 60px;

}

.avarattext {
  font-size: 14px;
  color: white;
  margin-left: 16px;
}

.right {
  width: 18px;
  height: 18px;
  margin-left: 187px;
}

.content {
  flex-grow: 1;
  display: flex;
  border-top: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  overflow: hidden;
  background-color: #f3f3f3;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
}

.content ul {
  width: 100%;
  height: 90%;
}

.order {
  width: 100%;
  height: 10%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.order a span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

.order img {
  margin-left: 260px;
}

.menu {
  width: 100%;
  height: 15%;
  background-color: white;
  margin-top: 1px;
}

.menu {
  display: flex;
  justify-content: center;

}

.menu a {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.menu a img {
  width: 40px;
  height: 40px;
}

.column {
  width: 100%;
  height: 10%;
  background-color: white;
  margin-top: 1px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

.column span {
  margin-left: -45px;
}

.columnImg {
  width: 38px;
  height: 38px;
}

.btnss {
  width: 80px;
  height: 40px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: none;
}
</style>